import React from 'react'

class Index extends React.Component {

    render() {
        return (<div className="view-product background-color">
                <div className="padding-big background-color">
                    <div className="account-info clearfix">
                        <div className="text-box-main min-width-300 fl">
                            <dl>
                                <dt className="padding-big-left lists-border-list clearfix">
                                    <div className="title fl padding-big-top padding-big-bottom">
                                        <p>HI,蔡大爷</p>
                                        <p className="margin-small-top clearfix">
                                            <span className="fl">账户安全级别：<em className="text-blue-deep">高</em></span>
                                            <a className="button bg-green-deep icon icon-button-green fl margin-left"
                                               href="#">通过实名认证</a>
                                        </p>
                                    </div>
									<span className="fr icon-head">
										<img src="Images/noavatar_middle.gif" alt="账户头像"/>
									</span>
                                </dt>
                                <dd className="padding-big clearfix">
                                    <p className="w50 fl">
                                        <i className="fl icon icon-mobile"></i>

                                        <span className="fl margin-left">手机：已绑定</span>
                                    </p>
                                    <p className="w50 fl">
                                        <i className="fl icon icon-email"></i>

                                        <span className="fl margin-left">邮箱：已绑定</span>
                                    </p>
                                </dd>
                            </dl>
                        </div>
                        <div className="text-box-main min-width-360 fl">
                            <dl>
                                <dt className="padding-big lists-border-list clearfix">
                                    <div className="fl w50 title">
                                        <p>账户余额</p>
                                        <p className="margin-small-top clearfix">
                                            <span className="fl"><em className="h3 text-red-deep">0.00 </em>元</span>
                                            <a className="fl margin-left button btn-red text-white" href="#">充值</a>
                                        </p>
                                    </div>
                                    <div className="fl w50 padding-left title">
                                        <p>短信条数</p>
                                        <p className="margin-small-top clearfix">
                                            <span className="fl"><em className="h3 text-blue-deep">0 </em>条</span>
                                            <a className="fl margin-left button btn-red text-white" target="view_window"
                                               href="#">购买</a>
                                        </p>
                                    </div>
                                </dt>
                                <dd className="padding-big">
                                    <div className="account-class text-hidden">
                                        <a href="#">未支付订单</a>
                                        <a href="#">已支付订单</a>
                                        <a href="#">充值记录</a>
                                        <a href="#">消费记录</a>
                                        <a href="#">提交工单</a>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                        <div className="text-box-main min-width-300 fl margin-right-none">
                            <dl>
                                <dt className="padding-big lists-border-list clearfix">
                                    <div className="fl title">
                                        <p>交流群：</p>
                                        <p className="text-sliver text-default margin-small-top">
                                            <em className="h3 text-golden margin-big-right">QQ：</em>284628487
                                        </p>
                                    </div>
                                    <div className="fr">
                                        <a className="button btn-orange text-white"
                                            target="_blank">点击加我</a>
                                    </div>
                                </dt>
                                <dd className="padding-big">
                                    <div className="account-className text-hidden">
                                        <p></p>
                                    </div>
                                </dd>
                            </dl>
                        </div>
                    </div>

                    <div className="account-product margin-big-top clearfix">
                        <div className="text-box-main padding-big fl mine-product">
                            <h2 className="h6 margin-big-bottom">我的产品</h2>
                            <div className="mine-product-content clearfix">
                                <ul className="w50 fl lists">
                                    <li className="w70 lists-border-list">
                                        <p className="border-list-text">云市场应用： <em className="orange">3</em> 台
                                            <a className="text-main fr" href="#">查看</a>
                                        </p>
                                    </li>
                                    <li className="w70 lists-border-list">
                                        <p className="border-list-text">云市场模块： <em className="orange">2</em> 台
                                            <a className="text-main fr" href="#">查看</a>
                                        </p>
                                    </li>
                                    <li className="w70 lists-border-list">
                                        <p className="border-list-text">云市场模板： <em className="orange">1</em> 台
                                            <a className="text-main fr" href="#">查看</a>
                                        </p>
                                    </li>

                                </ul>
                                <ul className="w50 fl lists">
                                    <li className="w80 lists-border-list">
                                        <p className="border-list-text">15天内到期的云市场应用： <em className="orange">0</em> 台
                                            <a className="text-main fr" href="#">查看</a>
                                        </p>
                                    </li>
                                    <li className="w80 lists-border-list">
                                        <p className="border-list-text">15天内到期的云市场模块： <em className="orange">0</em> 台
                                            <a className="text-main fr" href="#">查看</a>
                                        </p>
                                    </li>
                                    <li className="w80 lists-border-list">
                                        <p className="border-list-text">15天内到期的云市场模板： <em className="orange">0</em> 台
                                            <a className="text-main fr" href="#">查看</a>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div className="text-box-main padding-big fl w25">
                            <h2 className="h6 margin-big-bottom">我的产品</h2>
                            <ul className="lists">
                                <li className="lists-list"><a href="#">05-10
                                    云托管服务临时维护公告管服务临时维护公告管服务临时维护公告管服务临时维护公告管服务临时维护公告管服务临时维护公告</a></li>
                                <li className="lists-list"><a href="#">05-10 云托管服务临时维护公告</a></li>
                                <li className="lists-list"><a href="#">05-10 云托管服务临时维护公告</a></li>
                                <li className="lists-list"><a href="#">05-10 云托管服务临时维护公告</a></li>
                                <li className="lists-list"><a href="#">05-10 云托管服务临时维护公告</a></li>
                                <li className="lists-list"><a href="#">05-10 云托管服务临时维护公告</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Index;